@extends('layouts.adminlayout')

@section('main')

<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box box-primary">
                <div class="box-header">
                    <h3 class="box-title">Chức năng <small> </small></h3>
                </div><!-- /.box-header -->
                <div class="box-body table-responsive">
                    @if ($chuc_nangs->count())
                    <table class="table table-striped  table-hover" id='dataTable'>
                        <thead>
                            <tr>
                                <th>Tên Chức Năng</th>
                                <th>Route</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th>Tên Chức Năng</th>
                                <th>Route</th>
                            </tr>
                        </tfoot>
                        <tbody>
                            @foreach ($chuc_nangs as $chuc_nang)
                            <tr>
                                <td>{{{ $chuc_nang->ten_chuc_nang }}}</td>
                                <td>{{{ $chuc_nang->route }}}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    @else
                    Không có chức năng nào
                    @endif
                </div><!-- /.box-body -->
            </div><!-- /.box -->
        </div>
    </div>
</section>
<script src="<?php echo asset('public/admin/js/plugins/datatables/jquery.dataTables.columnFilter.js'); ?>" type="text/javascript"></script>
<script type="text/javascript">
    // Setup - add a text input to each footer cell
        $('#dataTable tfoot th').each(function() {
            var title = $('#dataTable thead th').eq($(this).index()).text();
            $(this).html('<input type="text" placeholder="' + title + '" />');
        });

        var table = $('#dataTable').DataTable({
                    "scrollX": "100%",
                    "scrollCollapse": true,
                    "paging": true,
                    "autoWidth": false,
                    "bSort" : false
                });
        // Apply the filter
        table.columns().eq(0).each(function(colIdx) {
            $('input', table.column(colIdx).footer()).on('keyup change', function() {
                table
                        .column(colIdx)
                        .search(this.value)
                        .draw();
            });
        });
</script>
@stop